<template>
  <div class="chart-container">

          <h1 class="button-basic">Welcome to W3Cschool</h1>
	        <h3 class="button-report">Hello!!!!!</h3>
          <div class="selector">demo</div>
          <child3></child3>
          <img class="anima" mode="widthFix" scr="./1vuex.png">

  </div>
</template>

<script>


 import child3 from './components/son3';

export default {
  name: "demoTwenty8",
  filters: {},
  data() {
    return {
       
    };
  },
  components:{
     child3
  },
  created() {

  },
  mounted() {
  

  },
  methods: {
   

  }
};
</script>

<style lang="scss" scoped>

   @mixin important-text {
      color: red;
      font-size: 25px;
      font-weight: bold;
      border: 1px solid blue;
   }
   .button-basic  {
     color:red;
  }

  .button-report  {
    @extend .button-basic;
    font-size:19px;
  }
  .selector {
      @include important-text;
      
    }


     .chart-container{
           ::v-deep .changeText{
              color: #2a82e4;
            }
     }

      img {
            animation: gogogo 2s infinite linear;
            width: 100px;
            height: 100px;
     }
 
     @keyframes gogogo {
            0% {
                transform: scale(1, 1)
            }
 
            50% {
                transform: scale(2, 2)
            }
 
            100% {
                transform: scale(1, 1)
            }
        }

 

    


</style>
